<%@ page language="java" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="blog.anchen8.net" />
	<title>毕业生，你的选择</title>
    <link rel="stylesheet" type="text/css" href="/Bys-Website/css/ShowImages.css" />
    <script src="../js/jQuery1.82.js" type="text/javascript"></script>
    <script src="../js/jquery.form.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$(".111").hide();
    	
    });
    
        function createMain(){
            var _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
            var _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
                document.getElementById("main").style.left=(_scrollWidth-950)/2+"px";
               // document.getElementById("m").style.height=_scrollHeight+"px";
        }
        function naviover(val){
            document.getElementById(val).style.backgroundColor="#E1DACF";
        }
        function naviout(val){
            document.getElementById(val).style.backgroundColor="#C5C5C5";
        }
        $(document).ready(function() {
			/*	2nd example	*/
			
			$("#menu2 li a").wrapInner( '<span class="out"></span>' );
			
			$("#menu2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});

		});
        function showEdit(editId){
            document.getElementById(editId).style.display='block';
            
        }
        function showClick(editId){
            document.getElementById(editId).style.display='none';
        }
        function uploadPic(){
            var msgw,msgh,bordercolor;
            msgw=472;//提示窗口的宽度
            msgh=230;//提示窗口的高度
            titleheight=25 //提示窗口标题高度
            bordercolor="#FF3C00";//提示窗口的边框颜色
            titlecolor="#D2CECE";//提示窗口的标题颜色
            var scrollH=document.body.scrollTop;
    
            var sWidth,sHeight;
            //sWidth=document.body.offsetWidth; //得出当前屏幕的宽
            sWidth=document.body.clientWidth;//BODY对象宽度

            //sHeight=screen.height;//得到当前屏幕的高
            //sHeight=document.body.clientHeight;//BODY对象高度
            if (window.innerHeight && window.scrollMaxY){
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight){
                sHeight = document.body.scrollHeight;
            }else{
                sHeight = document.body.offsetHeight;
            }//以上得到整个屏幕的高

            var bgObj=document.createElement("div");//创建一个div对象
            bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
            bgObj.style.position="relative";//把bgDiv这个div绝对定位
            bgObj.style.background="#fff";//背景颜色
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
            bgObj.style.opacity="0.6";//透明度(火狐浏览器中)
            bgObj.style.marginLeft="0px";//左边为0
            bgObj.style.marginTop="0px";//左边为0
            bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)
            bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)
            bgObj.style.zIndex = "100";//层的z轴位置
            
            
            var msgObj=document.createElement("div");//创建一个div对象
            msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            msgObj.setAttribute("align","center");//为div的align赋值
            msgObj.style.background="white";//背景颜色为白色
            msgObj.style.border="1px solid #AAA";//边框属性，颜色在上面已经赋值
            msgObj.style.position = "absolute";//绝对定位
            msgObj.style.left = (sWidth-msgw)/2+"px";//从左侧开始位置
            msgObj.style.top = (scrollH+150)+"px";//从上部开始位置
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
            //msgObj.style.marginLeft = "-225px";//左外边距
            //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距
            msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
            msgObj.style.height =msgh + "px";//提示框的高(上面定义过)
            msgObj.style.textAlign = "center";//文本位置属性，居中。
            msgObj.style.lineHeight ="25px";//行间距
            msgObj.style.zIndex = "101";//层的z轴位置
            document.body.appendChild(msgObj);
    		var str="";
    		var name=document.getElementById('photolist').dir;
    		str+="<form id='apply' action='UploadFile'  method='post' enctype='multipart/form-data'>";
            //msgObj.setAttribute("align","center");//为div的align赋值
           	str+="<h4 id='msgTitle'>上传照片</h4>";
            str+="<div id='selectFile'>";
            str+="相册名称：<input type='text' name='album' readonly='readonly' value='"+name+"'>";
            str+="</input>";
            str+="</div>";
            str+="<div id='AlbumName'>";
            str+="选择照片：<input id='imgs' type='file' name='aName' class='Albuminput' multiple/></div>";
            str+="<div id='AlbumDes'>";
            str+="照片描述:<textarea id='des' class='Albumtext' name='description'></textarea></div>";
            str+="<input type='hidden' name='modifyhead' value='null'>";
            str+="<div id='bottom'><label id='progress'>正在上传...</label>";
            str+=" <input type='button' name='createCancel' value='取消' class='Albumbtn'/>";
            str+="<input  type='submit' name='createOk' value='上传' class='Albumbtn1'/></div>";
            str+="</form>";
            msgObj.innerHTML=str;
            document.body.appendChild(bgObj);
            bgObj.onclick=function(){
                document.body.removeChild(bgObj);//移除遮罩层
                document.body.removeChild(msgObj);//移除遮罩层
                }
            $(document).ready(function() {
            	$("#progress").hide();
            	$(function (){  
            	    var options = {   
            	        success:    function(data){
            	        	$("#des").val("");
            	        	$("#imgs").val("");
            	        	$("#progress").text(data);
            	        }  
            	    };  
            	    $('#apply').submit(function(){
            	    	
            	    	$("#progress").text("正在上传...");
            	    	$("#progress").show();
            	        $(this).ajaxSubmit(options);  
            	        return false;  
            	    });  
            	});  
              
    	});
        }
        
        function showImage(i,n){
            var msgw,msgh,bordercolor;
            msgw=472;//提示窗口的宽度
            msgh=594;//提示窗口的高度
            titleheight=25 //提示窗口标题高度
            bordercolor="#FF3C00";//提示窗口的边框颜色
            titlecolor="#D2CECE";//提示窗口的标题颜色
            var scrollH=document.body.scrollTop;
    
            var sWidth,sHeight;
            //sWidth=document.body.offsetWidth; //得出当前屏幕的宽
            sWidth=document.body.clientWidth;//BODY对象宽度

            //sHeight=screen.height;//得到当前屏幕的高
            //sHeight=document.body.clientHeight;//BODY对象高度
            if (window.innerHeight && window.scrollMaxY){
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight){
                sHeight = document.body.scrollHeight;
            }else{
                sHeight = document.body.offsetHeight;
            }//以上得到整个屏幕的高

            var bgObj=document.createElement("div");//创建一个div对象
            bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
            bgObj.style.position="relative";//把bgDiv这个div绝对定位
            bgObj.style.background="#777";//背景颜色
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
            bgObj.style.opacity="0.6";//透明度(火狐浏览器中)
            bgObj.style.marginLeft="0px";//左边为0
            bgObj.style.marginTop="0px";//左边为0
            bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)
            bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)
            bgObj.style.zIndex = "100";//层的z轴位置
            document.body.appendChild(bgObj);
    
            var msgObj=document.createElement("div")//创建一个div对象
            msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            msgObj.setAttribute("align","center");//为div的align赋值
            //msgObj.style.background="white";//背景颜色为白色
            //msgObj.style.border="1px solid #AAA";//边框属性，颜色在上面已经赋值
            msgObj.style.position = "absolute";//绝对定位
            msgObj.style.left = (sWidth-800)/2+"px";//从左侧开始位置
            msgObj.style.top = (scrollH+150)+"px";//从上部开始位置
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
            //msgObj.style.marginLeft = "-225px";//左外边距
            //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距
            msgObj.style.width = "800px";//提示框的宽(上面定义过)
            msgObj.style.height ="500px";//提示框的高(上面定义过)
            msgObj.style.textAlign = "center";//文本位置属性，居中。
            msgObj.style.lineHeight ="25px";//行间距
            msgObj.style.zIndex = "101";//层的z轴位置
          
            var str="";
            str+="<ul class='iStu12'>";
            str+="<li class='prev'></li>";
            str+="<li class='images'>";
            str+="<div id='temp' class='slide'>";
            for(var j=i;j<=n;j++){
            	var picSrc1=document.getElementById("pic"+j).value;
            	var picdes1=document.getElementById("pic"+j).dir;
            	str+="<img src='"+picSrc1+"' alt='"+picdes1+"'>";
            }
            for(var k=1;k<i;k++){
            	var picSrc2=document.getElementById("pic"+k).value;
            	var picdes2=document.getElementById("pic"+k).dir;
            	str+="<img src='"+picSrc2+"' alt='"+picdes2+"'>";
            }
            str+="</div></li>";
            str+="<li class='next'></li>";
            str+="<li class='caption'>'</li>";
            str+="</ul>";
            msgObj.innerHTML=str;
            /*for(var j=i;j<=n;j++){
            	var picSrc1=$("#pic"+j+"").val();
            	var picdes1=$("#pic"+j+"").attr("dir");
            	alert(picSrc1);
            	$(".slide").append("<img src='"+picSrc1+"' alt='"+picdes1+"'>");
            }
            for(var k=1;k<i;k++){
            	var picSrc2=$("#pic"+k+"").val();
            	var picdes2=$("#pic"+k+"").attr("dir");
            	alert(picSrc2);
            	$(".slide").append("<img src='"+picSrc2+"' alt='"+picdes2+"'>");
            }*/
            bgObj.onclick=function(){
                document.body.removeChild(bgObj);//移除遮罩层
                document.body.removeChild(msgObj);//移除提示框
                }
            document.body.appendChild(msgObj);//在body中画出提示框层
            speed = 500;        
        /* setting the initial state of the slideshow and first image */
        var picVar = $('.iStu12 li.images div.slide img');
        totPic = picVar.length;
        curPicWidth = picVar.eq(0).width();
        curPicHeight = picVar.eq(0).height();
        totWidth = 0;
        
        /* calculate the total width of the images and set the div.slide to match */
        $.each((picVar), function() {
        totWidth = totWidth+$(this).width();
        });
        $('ul.iStu12 li.images div.slide').width(totWidth);
        /* find the first photo caption and place in the li.caption */
        caption = picVar.eq(0).attr('alt');
        $('li.caption').html(caption);
        
        /* resize the containing elements, left/right arrow positions and add the first image caption */
        resize(curPicWidth,curPicHeight,caption)
        
        
        /* monitor 'next' clicks */
        $('.iStu12 li.next').click (function() {
        	picVar = $('.iStu12 li.images div.slide img');
        
        /* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */
        	curPicWidth = picVar.eq(0).width();
        	curPicHeight = picVar.eq(0).height();
        	$('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed, 
        		function() {
        		$('ul.iStu12 li.images div.slide').find(':first').remove().appendTo('ul.iStu12 li.images div.slide');
        		$('ul.iStu12 li.images div.slide').css('left','0px'); 
        	});
        /* get the width, height and alt for the currently displayed image */
        	curPicWidth = picVar.eq(1).width();
        	curPicHeight = picVar.eq(1).height();
        	caption = picVar.eq(1).attr('alt');
        /* animate the containing elements and left/right arrow positions to match the current image */
        	resize(curPicWidth,curPicHeight,caption)
        });
        
        /* monitor 'previous' clicks */
        $('.iStu12 li.prev').click (function() {
        /*  get the last image from the set and make it the fist image, then set the left position of the set to minus the width of the new first image */
        	$('ul.iStu12 li.images div.slide').find(':last').remove().prependTo('ul.iStu12 li.images div.slide');
        	picVar = $('.iStu12 li.images div.slide img');
        
        	curPicWidth = picVar.eq(0).width();
        	curPicHeight = picVar.eq(0).height();
        
        	$('ul.iStu12 li.images div.slide').css('left',-curPicWidth); 
        /* animate the first image to left = 0 */
        	$('ul.iStu12 li.images div.slide').animate({left:0}, speed);
        	caption = picVar.eq(0).attr('alt');
        
        /* animate the containing elements, left/right arrow positions to match the current image and change the caption */
        	resize(curPicWidth,curPicHeight,caption)
        });
        }
        /* ================================================================ 
        Copyright (c) 2011 Stu Nicholls - iStu.co.uk. All rights reserved.
        This script and the associated html may be modified in any 
        way to fit your requirements.
        =================================================================== */
        /* just one variable to set-up */
        
        
        /* resize the containing elements, the left/right arrow positions and update the caption */
        function resize (w,h,c) {
            //这里可以控制图片的大小
            var ulh=h+30;
        	$('.iStu12').animate({width:w, height:ulh},speed);
        	$('.iStu12 li.prev').animate({top:(ulh-123)/2},speed);
        	$('.iStu12 li.next').animate({top:(ulh-123)/2},speed);
        	$('.iStu12 li.images').animate({width:w, height:h},speed);
        	$('li.caption').html(c);
        }
              
    </script>
</head>
<body class="body">
<jsp:useBean id="sql" scope="page" class="com.tzq.JAVABEAN.ConnectDB"/>
<jsp:useBean id="m_pages" scope="page" class="com.tzq.JAVABEAN.ShowBlog"/>
<jsp:useBean id="Click" scope="page" class="com.tzq.CLASS.UpdateClickTimes" />
<%String album = request.getParameter("album"); %>
<%String userid = request.getParameter("userid");
if(userid==null){%>
<jsp:forward page="/Public/PublicMainPage.jsp"></jsp:forward>
<%}
String Sessionid=null;
if(session.getAttribute("pid")!=null){
	Sessionid=session.getAttribute("pid").toString();
}
boolean flag= userid.equals(Sessionid);
int curPages = m_pages.current_Pages(m_pages.strPage(request,"page")); //取得当前页
int curFirstImageID = (curPages-1)*12;   //获取当前页第一张照片的Id
m_pages.setPage_record(12);//设置每页显示12条
ResultSet rs_count=sql.executeQuery("select count(*) as t from Images where UploaderID="+userid+" and PhotoAlbumName='"+album+"'");//传递进数据库处理的javabean
rs_count.next();
int resultconts=rs_count.getInt("t");//取得总的数据数
int totalPages = m_pages.getTotal_Pages(resultconts);//取出总页数

ResultSet totalImage = sql.executeQuery("select * from Images where UploaderID="+userid+" and PhotoAlbumName='"+album+"'");
ResultSet rsImage=m_pages.getPageSet(totalImage,curPages);    //分页的结果

ResultSet rsname = sql.executeQuery("select UserName from Userinfo where UserID="+userid+"");
rsname.next();

int i=1;%>
    <div class="main" id="main">
        <span class="title"><%=rsname.getString("UserName") %>的空间</span>
        <div id="menu2" class="menu">
			<ul>
				<li id="info"><a href="/Bys-Website/PersonMainPage.jsp?userID=<%=userid%>">个人信息</a></li>
				<li id="video"><a href="/Bys-Website/PersonVideo/MyVideo.jsp?userid=<%=userid %>">个人视频</a></li>
				<li id="photo"><a href="/Bys-Website/PersonImage/MyImage.jsp?userid=<%=userid%>">个人相册</a></li>
				<li id="blog"><a href="/Bys-Website/PersonBlog/MyBlog.jsp?userid=<%=userid%>">个人博客</a></li>
				<li><a href="javascript:;">Contacts</a></li>
			</ul>
		</div>
        <div id="photode">
            <div class="phototitle">
                &nbsp;<a href="/Bys-Website/PersonImage/MyImage.jsp?userid=<%=userid%>">我的相册</a>&nbsp;&raquo;&nbsp;<%=album %>
                <form>
                    <%if(flag){ %><input type="button" value="上传照片" class="inputupload" onclick="uploadPic()"/><%} %> 
                </form>
            </div>
            <div class="photolist" id="photolist" dir="<%=album%>">
                <ul>
                	<%int k=1;while(rsImage.next()){
                	String picId="pic"+k;
                	String editId="edit"+k;
                	String photoId="photo"+k;%>
                	<li>
                        <div class="eachphoto" id="<%=photoId %>" onmouseover="showEdit('<%=editId %>')" onmouseout="showClick('<%=editId%>')">
                            <img alt="<%=rsImage.getString("UserImageName") %>" src="/Bys-Website/USERS/<%=userid %>/Images/<%=rsImage.getString("ServerImageName") %>" onclick="showImage(<%=curFirstImageID+k%>,<%=resultconts%>)"/> 
                            <div class="photoname"><%=rsImage.getString("ImageDescription") %></div>
                	<%if(flag){ %>
						
							<div class="photoedit" id="<%=editId%>">
                                <a href="#">编辑</a>&nbsp;&nbsp;
                                <a href="DeleteServlet?method=1&serverimagename=<%=rsImage.getString("ServerImageName")%>">删除</a>
                        	</div>
					<%}%>  
                		</div>
                    </li>
					<%i=i+1;k++;
					if(i>12)
    					break;
					} %>    
                </ul>
                <div class="pgswitch">
                    <div class="pgpre"><%if(curPages>1){%><a href="ShowImages.jsp?page=<%=curPages-1%>&album=<%=album %>&userid=<%=userid  %> ">上一页</a><%}%></div>
                    <div class="pgnext"><%if(curPages<totalPages){%><a href="ShowImages.jsp?page=<%=curPages+1%>&album=<%=album %>&userid=<%=userid  %>">下一页</a><%}%></div>
                </div>
            </div> 
        </div>
    </div>
    <script>
        createMain();
    </script>
    <div class="topbar">
        <div class="logo">
	       	<a href="/Bys-Website/Public/home.jsp">
	           	<img src="/Bys-Website/SourceImageFile/toplogo.jpg"/>
			</a>
        </div>
        <div class="navi">
            <ul class="naviul">
                <li><a href="/Bys-Website/Public/Video.jsp" class="outli">视频</a></li>
				<li><a href="/Bys-Website/Public/Photo.jsp" class="inli">相册</a></li>
				<li><a href="/Bys-Website/Public/Blog.jsp" class="outli">博客</a></li>
            </ul>
        </div>
        <div class="loginfo">
            <ul class="loginfoul">
                <%if(session.getAttribute("pid")==null){%>
				<li><a href="/Bys-Website/Log_in.jsp">登录</a></li>
				<li><a href="/Bys-Website/Regist.jsp">注册</a></li>
			<%}else{%>
				<li><a href="../PersonMainPage.jsp?userID=<%=Sessionid  %>"><%=session.getAttribute("username").toString()%></a></li>
				<li><a href="../LoginServlet?method=1">退出</a></li>
			<%}%>
            </ul>
        </div>
    </div>
    <%int q = 1;  //设置第几张照片
    totalImage.beforeFirst();
    while(totalImage.next()){
    	String picId="pic"+q;
    	q++;%>
    	<div class="111">
    	<img id="<%=1+picId%>">
    	<input type="hidden" id="<%=picId%>" value="/Bys-Website/USERS/<%=userid %>/Images/<%=totalImage.getString("ServerImageName") %>" dir="<%=totalImage.getString("ImageDescription") %> ">
        </div>
    <%}
    sql.closeConnection(); %>
</body>
</html>